import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar, DLookImages } from '@/components'
import { AtButton } from 'taro-ui'
import './contractproof.scss'
import http from '@/api'
const itembg = require('../assets/pic@2x.png')
const conf = require('../../../config/conf')

export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      status: '',
      firstList: [],
      secondList: [],
      threeList: [],
      fourList: [],
      id: '',
      companycar: {
        itemStatus: false,
        itemUrl: ''
      }
    }
  }
  componentWillMount() {
    let { id, status, remark } = this.$router.params
    this.setState({
      status,
      id
    })
    this.queryOrderFile(id)
    if (remark == 1) {
      http.confirmOrder({ id: `${id}` }).then(res => {
        Taro.redirectTo({
          url: `/pages/itemdetail/shopdetail?id=${id}&status=33`
        })
      })
    }
  }
  queryOrderFile(id) {
    http.queryOrderFile({ id: `${id}` }).then(res => {
      let { firstList, secondList, threeList, fourList } = this.state
      res.orderTransCarFileList.map(item => {
        if (item.cfType === '1') {
          firstList.push({
            url: `${item.cfFileUrl}`
          })
        }
        if (item.cfType === '2') {
          secondList.push({
            url: `${item.cfFileUrl}`
          })
        }
        if (item.cfType === '3') {
          threeList.push({
            url: `${item.cfFileUrl}`
          })
        }
        if (item.cfType === '4') {
          fourList.push({
            url: `${item.cfFileUrl}`
          })
        }
      })
      this.setState({
        firstList,
        secondList,
        threeList,
        fourList
      })
    })
  }
  handleFinish() {
    let { id } = this.state
    http.confirmOrder3(id).then(res => {
      if (res === 0) {
        Taro.showToast({
          title: '该合同已确认',
          icon: 'none',
          duration: 800
        })
        setTimeout(() => {
          Taro.redirectTo({
            url: `/pages/shoporders/shoporders?active=3`
          })
        }, 800);
      } else {
        this.confirmOrder(id)
      }
    })
  }
  confirmOrder(id) {
    http.confirmOrder2({ id: `${id}` }).then(({ bodyData, infoData, signData }) => {
      this.setState({
        bodyData, infoData, signData
      }, () => {
        this.refs.submit.click()
      })
    })
  }
  onLookHandle(url, i, arr) {
    if (window.bridge && arr.length > 0) {
      let _images = []
      arr.map(item => {
        _images.push(item.url)
      })
      window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
    } else {
      this.setState({
        companycar: {
          ...this.state.companycar,
          itemStatus: true,
          itemUrl: url
        }
      })
    }
  }

  onLookItem() {
    this.setState({
      companycar: {
        ...this.state.companycar,
        itemStatus: false,
        itemUrl: ''
      }
    })
  }
  render() {
    const {
      status,
      firstList,
      secondList,
      threeList,
      fourList,
      companycar,
      infoData,
      bodyData,
      signData
    } = this.state
    return (
      <View className='b_contractproof'>
        <DNavBar title='合同凭证'></DNavBar>
        <View className='b_contractproof__box'>
          {/* <View className="b_contractproof__tips">
                  <Text>请耐心等待，平台管理员将会在3个工作日内审核您的申请</Text>
              </View> */}
        </View>
        <View className='b_contractproof__images'>
          <View className="b_contractproof__images_enterpris">
            <View className='b_contractproof__images_enterpris_item'>
              <Text className='item_title'>车辆采购合同</Text>
              {firstList &&
                firstList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, firstList)}></Image>
                })
              }

            </View>
            <View className="b_contractproof__images_enterpris_item">
              <Text className="item_title">车辆交接凭证</Text>
              {
                secondList &&
                secondList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                })
              }
            </View>
            <View className="b_contractproof__images_enterpris_item">
              <Text className="item_title">付款凭证</Text>
              {
                threeList &&
                threeList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, threeList)}></Image>
                })
              }
            </View>
            <View className="b_contractproof__images_enterpris_item">
              <Text className="item_title">其他</Text>
              {
                fourList &&
                fourList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, fourList)}></Image>
                })
              }
            </View>
          </View>
        </View>
        <View className='b_contractproof__footer'>
          {status !== '1' &&
            <AtButton className='item_btn' onClick={this.handleFinish.bind(this)}>交易完成</AtButton>
          }
        </View>

        <DLookImages status={companycar.itemStatus} url={companycar.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>

        {/* 跳转龙存管页面 */}
        <form action={conf.fromURL} method="post">
          <input type="hidden" name="INFO" value={infoData} />
          <input type="hidden" name="CONTENTTYPE" value="json" />
          <input type="hidden" name="charset" value="GBK" />
          <input type="hidden" name="BODY" value={bodyData} />
          <input type="hidden" name="SIGN" value={signData} />
          <input type="submit" ref="submit" value="Submit" style={{ opacity: 0, width: 0, height: 0 }} />
        </form>
      </View>
    )
  }
}
